<template>
    <L7MapWithGaode :mapOnloadCB="mapOnloadCB"></L7MapWithGaode>
</template>

<script lang="ts">
import {Scene, PointLayer} from '@antv/l7';
import {defineComponent, onMounted, ref} from "vue"
import L7MapWithGaode from "@/component/common/L7MapWithGaode.component.vue"

export default defineComponent({
    name: "L7.addBubble3",
    components: {L7MapWithGaode},
    setup() {
        const mapOnloadCB = (scene: Scene) => {
            scene.setZoomAndCenter(2.194613775109773, [96.99215001469588, 29.281597225674773])

            fetch(`${window.location.origin}/antv-test/data/337ddbb7-aa3f-4679-ab60-d64359241955.json`)
                .then(res => res.json())
                .then(data => {
                    data.features = data.features.filter((item: { properties: { capacity: number } }) => {
                        return item.properties.capacity > 800;
                    });
                    const pointLayer = new PointLayer({})
                        .source(data)
                        .shape('circle')
                        .size('capacity', [0, 16])
                        .color('capacity', [
                            '#34B6B7',
                            '#4AC5AF',
                            '#5FD3A6',
                            '#7BE39E',
                            '#A1EDB8',
                            '#CEF8D6'
                        ])
                        .active(true)
                        .style({
                            opacity: 0.5,
                            strokeWidth: 0
                        });

                    scene.addLayer(pointLayer);
                });
        }

        return {
            mapOnloadCB
        }
    }
})
</script>

<style scoped>

</style>
